<template>
  <div>
    <h2>Home组件</h2>
    <!-- 声明式路由导航-使用router-link组件,支持用户在具有路由功能的应用中 (点击) 导航 -->
    <!-- <router-link to="/Home/News" tag="button">新闻</router-link>
    <router-link to="/Home/Music" tag="button">音乐</router-link>
    <router-link to="/Home/Game" tag="button">游戏</router-link> -->

    <!-- replace属性让路由跳转的过程中替换之前的历史记录 -->
    <!-- active-class:设置链接激活时使用的 CSS 类名 -->
    <!-- <router-link
      :to="{ path: '/Home/News',
      }"
      tag="button"
      replace
      active-class="active"
      >新闻</router-link
    >
    <router-link
      :to="{
        name: 'Music',
      }"
      tag="button"
      replace
      active-class="active"
      >音乐</router-link
    >
    <router-link
      :to="{
        name: 'Game',
      }"
      tag="button"
      replace
      active-class="active"
      >游戏</router-link
    > -->

    <!-- 编程式路由导航 -->
    <button @click="toNews">新闻</button>
    <button @click="toMusic">音乐</button>
    <button @click="toGame">游戏</button>
    <!-- home中的二级路由出口 -->
    <router-view></router-view>
  </div>
</template>
  
<script>
export default {
  name: "Home",
  methods: {
    toNews() {
      this.$router.push("/Home/News",()=>{});
    },
    toMusic() {
      this.$router.push({
        name: "Music",
      }).catch(()=>{})
    },
    toGame() {
      this.$router.push({
        path: "Game",
      }).catch(()=>{})
    },
  },
};
</script>

<style scoped>
.active {
  background: yellow;
}
</style>
